@charset "utf-8";
@import "common/common";
@import "animate";
.carousel_wrap{
    width: 100%;
    margin-top: 50px;
}
.lunbo_wrap {
    position: relative;
    /*border: 1px solid firebrick;*/
    overflow: hidden;
    width: 100%;
}

.pic_box {
    height: 100%;
//              width: 9999px;
    white-space: nowrap;
    font-size: 0;
}

.pic_box li {
    position: relative;
    height: 100%;
//              float: left;
    display: inline-block;
}

.pic_box li img {
    width: 100%;
    display: block;
}

.pannel {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 1%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pannel li {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    margin-right: 4px;
    border: 1px solid white;
}

#left_arrow,
#right_arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    display: block;
    width: 24px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    background: #000;
    opacity: .3;
}

#left_arrow:hover,
#right_arrow:hover {
    opacity: .5;
}

#left_arrow {
    left: 0;
}

#right_arrow {
    right: 0;
}

.pannel .active {
    background: white;
    border-color: white;
    height: 10px;
    width: 10px;
}
//以上轮播样式

.hot{
    h2{
        margin-top: 34px;
        font-size: 30px;
    }
    p{
        font-size: 12px;
        color: #898989;
        line-height: 30px;
    }
    ul{
        padding-left: 0;
        margin-bottom: 0;
        li{
            cursor: pointer;
            list-style: none;
            overflow: hidden;
            margin-bottom: 30px;
            &:hover{
                opacity: .8;
            }
            img{
                border-radius: 8px;
            }
        }
    }
    .hot_one{
        position: relative;
        background: url(../img/game_bg_02.png) no-repeat 0 20px;
        .hot_i{
            width: 40px;
            height: 100px;
            color: white;
            font-size: 19px;
            padding-left: 10px;
            padding-top: 20px;
            position: absolute;
            left: 15px;
            background: url(../img/hot-icon.png) no-repeat;
        }
    }
    .hot_two{
        >p{
            text-align: justify;
        }
        background: url(../img/game_bg_01.png) no-repeat 660px 20px;
    }
}
.game_more{
    padding-bottom: 49px;
    h2{
        font-size: 35px;
        margin-top: 94px;
        margin-bottom: 38px;
    }
    ul{
        padding-left: 0;
        li{
            cursor: pointer;
            overflow: hidden;
            &:hover{
                opacity: .8;
                span{
                    transform: translateX(0);
                }
            }
            list-style: none;
            p{
                text-align: center;
                margin-top: 13px;
                margin-bottom: 43px;
            }
            dd{
                border-radius: 6px;
                overflow: hidden;
                height: auto;
                position: relative;
                span{
                    color: white;
                    transition: all 500ms;
                    transform: translateX(102%);
                    position: absolute;
                    top: 0;
                    text-align: justify;
                    height: 100%;
                    display: block;
                    background: rgba(0,0,0,.8);
                    border-radius: 8px;
                    padding: 12px;
                }
            }
        }
    }
}

@media (min-width:768px) and (max-width:992px){
    .hot .hot_two{
        background-position: 420px 20px;
    }
}
@media (max-width:768px){
    .hot{
        >div{
            >div{
                background: none !important;
            }
        }
    }
}
@media (max-width:768px){
    .game_more h2{
        margin-top: 50px;
    }
    .game_more ul li p{
        margin-bottom: 35px;
    }
    .pull-right{
        padding-top: 100px;
    }
}
